<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>${fns:getConfig('productName')} 登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="kyjszj" />
    <%@include file="/WEB-INF/views/include/head.jsp" %>
</head>
<body>
<!-- section header -->
<header class="header" data-spy="affix" data-offset-top="0">
    <!--nav bar helper-->
    <div class="navbar-helper">
        <div class="row-fluid">
            <!--panel site-name-->
            <div class="span10">
                <div class="panel-sitename">
                    <h2><a href="index.html"><span class="color-teal">${fns:getConfig('productName')}</span></a></h2>
                </div>
            </div>
            <!--/panel name-->
        </div>
    </div><!--/nav bar helper-->
</header>

<!-- section content -->
<section class="section">
    <div class="container">
        <div class="signin-form row-fluid">
            <!--Sign In-->
            <div class="span5 offset1">
                <div class="box corner-all">
                    <div class="box-header grd-teal color-white corner-top">
                        <span>登录:</span>
                    </div>
                    <div class="box-body bg-white">
                        <form id="sign-in" method="post" />
                        <div class="control-group">
                            <label class="control-label">用户名</label>
                            <div class="controls">
                                <input type="text" class="input-block-level" data-validate="{required: true, messages:{required:'请输入用户名'}}" name="login_username" id="login_username" autocomplete="off" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">密码</label>
                            <div class="controls">
                                <input type="password" class="input-block-level" data-validate="{required: true, messages:{required:'请输入密码'}}" name="login_password" id="login_password" autocomplete="off" />
                            </div>
                        </div>
                        <div class="control-group">

                            <label class="checkbox">
                                <input type="checkbox" data-form="uniform" name="remember_me" id="remember_me_yes" value="yes" /> 记住我
                            </label>
                        </div>
                        <div class="form-actions">
                            <input type="submit" class="btn btn-block btn-large btn-primary" value="点我登录" />
                            <p class="recover-account"> <a href="#modal-recover" class="link" data-toggle="modal">忘记密码</a></p>
                        </div>
                        </form>
                    </div>
                </div>
            </div><!--/Sign In-->
            <!--Sign Up-->
            <div class="span5">
                <div class="box corner-all">
                    <div class="box-header grd-green color-white corner-top">
                        <span>注册用户</span>
                    </div>
                    <div class="box-body bg-white">
                        <form id="sign-up" method="post" />
                        <div class="control-group">
                            <label class="control-label">用户名</label>
                            <div class="controls">
                                <input type="text" class="input-block-level" data-validate="{required: true, messages:{required:'请输入用户名'}}" name="username" id="username" autocomplete="off" />
                                <p class="help-block muted helper-font-small">可包含数字、字母、下划线，长度在2-20个字符.</p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Email</label>
                            <div class="controls">
                                <input type="text" class="input-block-level" data-validate="{required: true, email:true, messages:{required:'请输入E-mail地址', email:'请输入可用的E-mail地址}}" name="email" id="email" autocomplete="off" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">密码</label>
                            <div class="controls">
                                <input type="password" class="input-block-level" data-validate="{required: true, minlength: 6, messages:{required:'请输入密码', minlength:'密码不能少于6位.'}}" name="password" id="password" autocomplete="off" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">确认密码</label>
                            <div class="controls">
                                <input type="password" class="input-block-level" data-validate="{required: true, equalTo: '#password', messages:{required:'请输入确认密码', equalTo: '两次密码输入不一致'}}" name="password_again" id="password_again" autocomplete="off" />
                            </div>
                        </div>
                        <div class="control-group">
                            <p class="term-of-use"> <a href="#">使用条款和隐私政策</a>.</p>
                        </div>
                        <div class="control-group">
                        </div>
                        <div class="form-actions">
                            <input type="submit" class="btn btn-block btn-large btn-success" value="注册用户" />
                        </div>
                        </form>
                    </div>
                </div>
            </div><!--/Sign Up-->
        </div><!-- /row -->
    </div><!-- /container -->

    <!-- modal recover -->
    <div id="modal-recover" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modal-recoverLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="modal-recoverLabel">重置密码  <small>用户名或邮箱地址</small></h3>
        </div>
        <div class="modal-body">
            <form id="form-recover" method="post" />
            <div class="control-group">
                <div class="controls">
                    <input type="text" data-validate="{required: true, email:true, messages:{required:'请输入E-mail地址', email:'请输入正确的E-mail地址'}}" name="recover" />
                    <p class="help-block helper-font-small">请输入用户名或密码，我们将会给你发送一封重置信息.</p>
                </div>
            </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            <input type="submit" form="form-recover" class="btn btn-primary" value="发送" />
        </div>
    </div><!-- /modal recover-->
</section>
<%@include file="/WEB-INF/views/include/js.jsp" %>
<script type="text/javascript">
    $(document).ready(function() {
        // try your js

        // uniform
        $('[data-form=uniform]').uniform();

        // validate
        $('#sign-in').validate();
        $('#sign-up').validate();
        $('#form-recover').validate();
    })
</script>
</body>
</html>
